<template>
  <div class="right-pane">
    <aside>
      <header>
        <ol>
          <li class="nav-item 1" :class="{active:currentActive==1}" @click="clickHandler(1)">
            <span class="nav-label">样式</span>
            <span class="nav-underline"></span>
          </li>
          <li class="nav-item 2" :class="{active:currentActive==2}" @click="clickHandler(2)">
            <span class="nav-label">事件</span>
            <span class="nav-underline"></span>
          </li>
        </ol>
      </header>
      <main>
        <!-- 样式 -->
        <widget-style />
        <!-- 事件 -->
      </main>
    </aside>
  </div>
</template>

<script>
import WidgetStyle from '@/components/views/settings/style'

export default {
  components: {
    'widget-style': WidgetStyle
  },
  methods: {
    clickHandler(index) {
      this.currentActive = index
    }
  },
  data() {
    return {
      currentActive: '1'
    }
  }
}
</script>

<style lang="less" scoped>
.right-pane {
  z-index: 15;
  position: relative;
  width: 230px;
  display: flex;
  box-shadow: rgba(39, 54, 78, 0.11) 0px -2px 10px 0px;
  height: 100%;
  right: 0px;
  background: #ffffff;

  aside {
    display: flex;
    flex-direction: column;
    flex: 1 1 0%;
    background: rgb(255, 255, 255);
    overflow: hidden;
    > header {
      display: flex;
      flex-shrink: 0;
      height: 40px;
      padding-left: 10px;
      padding-right: 12px;
      border-bottom: 1px solid rgb(219, 219, 219);
      ol {
        display: flex;
        height: 100%;
        width: 100%;
        list-style: none;
        padding: 0px;
        .nav-item {
          position: relative;
          display: flex;
          -webkit-box-align: center;
          align-items: center;
          color: rgb(125, 134, 148);
          cursor: pointer;
          padding: 0px 6px;
          transition: all 0.2s ease-out 0s;

          .nav-underline {
            visibility: hidden;
          }
        }
        .nav-item.active {
          color: rgb(31, 41, 46);
          font-weight: 600;
          .nav-underline {
            visibility: visible;
            position: absolute;
            left: 0px;
            bottom: 0px;
            width: 100%;
            border-bottom: 2px solid rgb(31, 41, 46);
          }
        }
      }
    } // end header
    > main {
      flex: 1 1 0%;
      overflow-x: hidden;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
    } // end main
  }
}
</style>